<template>
  <div class="log-container ele-body">
    <el-card shadow="never">
      <div class="toolbar-box" style="margin-bottom:4px;">
        <div class="tool-btn">
          <!-- <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            @click="removeBatch"
            >删除</el-button
          > -->
          <el-button
              size="mini"
              type="default"
              icon="el-icon-download"
              @click="exportTable"
          >导出</el-button
          >
        </div>
        <div class="tool-tab">
          <ul>
            <li :key="i" v-for="(item, i) in tabList">
              <span
                @click="tabchanged(item.type)"
                :class="{ active: logType == i + 1 }"
                >{{ item.value }}</span
              >
            </li>
          </ul>
        </div>

      </div>
      <!-- 数据表格 -->
      <el-table
        border
        lazy
        ref="table"
        :data="data"
        v-loading="loading"
        height="calc(100vh - 310px)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <!-- <el-table-column label="序号" width="55" align="center" type="index">
        <template slot-scope="scope">
          <span
            v-text="$setTableIndex(query.page, query.limit, scope.$index)"
          >
          </span>
        </template>
      </el-table-column> -->
        <el-table-column
          label="平台用户总数"
          align="center"
          prop="user_num"
          show-overflow-tooltip
        />
        <el-table-column
          label="用户活跃总数"
          align="center"
          prop="active_user_num"
          show-overflow-tooltip
        />
        <el-table-column
          label="终端总数"
          align="center"
          prop="terminal_num"
          show-overflow-tooltip
        />
        <el-table-column
          label="活跃终端数"
          align="center"
          prop="active_terminal_num"
          show-overflow-tooltip
        />
<!--        <el-table-column-->
<!--          label="通话终端数"-->
<!--          align="center"-->
<!--          prop="call_terminal_num"-->
<!--        />-->
<!--        <el-table-column label="GPS点数" align="center" prop="gps_num" />-->
<!--        <el-table-column label="基站点数" align="center" prop="base_num" />-->
<!--        <el-table-column label="混合点数" align="center" prop="mix_num" />-->
        <el-table-column label="统计周期" align="center" prop="sort">
          <template slot-scope="scope">
            <template v-if="logType == 1"
              >{{ scope.row.year }}-{{ scope.row.month }}-{{
                scope.row.day
              }}</template
            >
            <template v-if="logType == 2"
              >{{ scope.row.year }}年-第{{ scope.row.week }}周</template
            >
            <template v-if="logType == 3"
              >{{ scope.row.year }}年-{{ scope.row.month }}月</template
            >
            <template v-if="logType == 4">{{ scope.row.year }}年</template>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" :resizable="false">
          <template slot-scope="{ row }">
            <el-popconfirm
              title="确定要删除该型号吗？"
              @confirm="remove(row)"
              class="ele-action"
            >
              <el-button
                size="small"
                type="danger"
                slot="reference"
                icon="el-icon-delete"
                :underline="false"
              ></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="query.page"
        :limit.sync="query.limit"
        @pagination="getData"
      />
    </el-card>
  </div>
</template>
<script>
export default {
  name: "DeviceLog",
  data() {
    return {
      // 加载状态
      loading: false,
      // 搜索条件
      query: {
        page: 1,
        limit: 10
      },
      ids: [], // 选中数组
      selection: [], // 表格选中数据
      total: 0, // 数据总数
      data: [],
      logType: "1",
      tabList: [
        {
          type: "1",
          value: "日统计"
        },
        {
          type: "2",
          value: "周统计"
        },
        {
          type: "3",
          value: "月统计"
        },
        {
          type: "4",
          value: "年统计"
        }
      ]
    };
  },
  mounted() {
    this.query.type = "1";
    this.getData();
  },
  methods: {
    /* 获取表格数据 */
    getData() {
      this.loading = true;
      this.$http
        .get("/active_user_sta/index", { params: this.query })
        .then(res => {
          this.loading = false;
          this.total = res.data.count;
          this.data = res.data.data;
        })
        .catch(e => {
          this.loading = false;
          this.$message.error(e.message);
        });
    },
    /* 查询数据 */
    reload() {
      this.getData();
    },
    /* 重置搜索 */
    reset() {
      this.query = {
        page: 1,
        limit: 10
      };
      this.reload();
    },
    tabchanged(type) {
      this.logType = type;
      this.query.type = type;
      this.getData();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.selection = selection;
    },
    /* 删除 */
    remove(row) {
      this.loading = true;
      this.$http
        .post("", { id: row.id })
        .then(res => {
          this.loading = false;
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.getData();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(e => {
          this.loading = false;
          this.$message.error(e.message);
        });
    },
    /* 批量删除 */
    removeBatch() {
      if (!this.selection.length) {
        this.$message.error("请至少选择一条数据");
        return;
      }
      this.$confirm("确定要删除选中的型号吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          this.loading = true;
          this.$http
            .post("", { id: this.ids })
            .then(res => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);
                this.getData();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(e => {
              this.loading = false;
              this.$message.error(e.message);
            });
        })
        .catch(() => {});
    },
    /* 导出 */
    exportTable() {
      this.$http
        .get("/active_user_sta/exportExcel", {
          params: { limit: 999999, type: this.logType }
        })
        .then(res => {
          if (res.data.success) {
            window.open(res.data.data);
          }
        })
        .catch(e => {
          this.loading = false;
          this.$message.error(e.message);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.toolbar-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .tool-tab {
    height: 32px;
    ul {
      height: 100%;
      display: flex;
      list-style: none;
      align-items: center;
      li {
        height: 100%;
        padding: 0 10px;
        border-right: 2px solid #ddd;
        &:first-child {
          padding-left: 0;
        }
        &:last-child {
          padding-right: 0;
          border-right: 0;
        }
        span {
          display: block;
          font-size: 14px;
          cursor: pointer;
          padding: 7px 10px;
          border-radius: 4px;
          border: 1px solid #ddd;
          &.active {
            color: #ffffff;
            border-color: #0f40f5;
            background: #0f40f5;
          }
        }
      }
    }
  }
}
</style>
